<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>里程碑事件</title>
  <link href="https://fonts.googleapis.com/css?family=Merriweather:900&display=swap" rel="stylesheet">
  <!-- 引入 Google Font Open Sans -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap" rel="stylesheet">
  <!-- 引入 Leaflet 样式 -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    /* CSS Custom Properties */
    :root {
      --backgroundColor: rgba(246, 241, 209); /* Note: This won't be used for body background to keep existing style */
      --colorShadeA: rgb(106, 163, 137);
      --colorShadeB: rgb(121, 186, 156);
      --colorShadeC: rgb(150, 232, 195);
      --colorShadeD: rgb(187, 232, 211);
      --colorShadeE: rgb(205, 255, 232);

      /* Existing variables */
      --color-primary: #002626;
      --color-secondary: #F0F7EE;
      --duration: 1s;
      --nav-duration: calc(var(--duration) / 4);
      --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
      --space: 1rem;
      --font-primary: 'Helvetica', sans-serif;
      --font-heading: 'Merriweather', serif;
      --font-size: 1.125rem;
      --line-height: 1.5;
    }
    
    /* Keep existing body styles, only apply font if needed elsewhere */
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f5f5;
      background-image: url('img/14.png');
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
      margin: 0;
      padding: 0;
      padding-bottom: 2rem; /* Add padding to body */
    }

    /* Box sizing reset (from provided CSS) */
    * {
      box-sizing: border-box;
    }
    *::before,
    *::after {
      box-sizing: border-box;
    }

    /* 通用标头样式 */
    #header-container {
      background: linear-gradient(135deg, #ecf6ff, #8dbeeb);
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      width: 96%;
     
      padding: 20px 30px; /* Adjusted padding */
      text-align: center;
      position: relative;
      margin: 1rem auto; /* Adjusted top/bottom margin */
      display: flex; /* Use flexbox */
      align-items: center; /* Center items vertically */
      justify-content: center; /* Center items horizontally */
    }
    header {
      position: relative;
      display: flex; /* Make header content flex */
      align-items: center; /* Align logo and title */
      width: 100%; /* Ensure header takes full width */
      justify-content: center; /* Center content horizontally */
    }
    header h1 {
      color: rgb(0, 0, 0);
      font-size: 2.5rem;
      margin: 0;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
      width: 100%; /* Take full width */
      text-align: center; /* Center text */
    }
    
    /* 新导航菜单样式 */
    .main-navigation-toggle {
      position: fixed;
      height: 1px; 
      width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      white-space: nowrap;
    }
    
    .main-navigation-toggle + label {
      position: fixed;
      top: calc(var(--space) * 1.5);
      right: calc(var(--space) * 2);
      cursor: pointer;
      z-index: 30;
    }
    
    .icon--menu-toggle {
      --size: calc(1rem + 4vmin);
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--size);
      height: var(--size);
      stroke-width: 6;
    }
    
    .icon-group {
      transform: translateX(0);
      transition: transform var(--nav-duration) var(--ease);
    }
    
    .icon--menu {
      stroke: var(--color-primary);
    }
    
    .icon--close {
      stroke: var(--color-secondary);
      transform: translateX(-100%);
    }
    
    .main-navigation {
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      transform: translateX(-100%);
      transition: transform var(--nav-duration);
      z-index: 20;
    }
    
    .main-navigation:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #8dbeeb;
      transform-origin: 0 50%;
      z-index: -1;
    }
    
    .main-navigation ul {
      font-size: 12vmin;
      font-family: var(--font-heading);
      width: 100%;
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .main-navigation li {
      --border-size: 1vmin;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    
    .main-navigation li:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: var(--border-size);
      background-color: var(--color-secondary);
      transform-origin: 0 50%;
      transform: translateX(-100%) skew(15deg);
    }
    
    .main-navigation a {
      display: inline-block;
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      color: var(--color-secondary);
      line-height: 1;
      text-decoration: none;
      user-select: none;
      padding: var(--space) calc(var(--space) * 2) calc(var(--space) + var(--border-size) / 2);
      transform: translateY(100%);
    }
    
    .main-content {
      margin: 2rem auto;
      max-width: 1200px;
      width: 96%;
      padding: 0 calc(var(--space) * 2);
      transform: translateX(0);
      transition: transform calc(var(--nav-duration) * 2) var(--ease);
      padding-bottom: 0; /* Remove bottom padding from main */
    }
    
    .main-content > * + * {
      margin-top: calc(var(--space) * var(--line-height));
    }
    
    .main-navigation-toggle:checked ~ label .icon--menu-toggle .icon-group {
      transform: translateX(100%);
    }
    
    .main-navigation-toggle:checked ~ .main-content {
      transform: translateX(10%);
    }
    
    .main-navigation-toggle:checked ~ .main-navigation {
      transition-duration: 0s;
      transform: translateX(0);
    }
    
    .main-navigation-toggle:checked ~ .main-navigation:after {
      animation: nav-bg var(--nav-duration) var(--ease) forwards;
    }
    
    .main-navigation-toggle:checked ~ .main-navigation li:after {
      animation: nav-line var(--duration) var(--ease) forwards;
    }
    
    .main-navigation-toggle:checked ~ .main-navigation a {
      animation: link-appear calc(var(--duration) * 1.5) var(--ease) forwards;
    }
    
    .main-navigation-toggle:checked ~ .main-navigation li:nth-child(1):after,
    .main-navigation-toggle:checked ~ .main-navigation li:nth-child(1) a {
      animation-delay: calc((var(--duration) / 2) * 1 * 0.125);
    }
    
    .main-navigation-toggle:checked ~ .main-navigation li:nth-child(2):after,
    .main-navigation-toggle:checked ~ .main-navigation li:nth-child(2) a {
      animation-delay: calc((var(--duration) / 2) * 2 * 0.125);
    }
    
    .main-navigation-toggle:checked ~ .main-navigation li:nth-child(3):after,
    .main-navigation-toggle:checked ~ .main-navigation li:nth-child(3) a {
      animation-delay: calc((var(--duration) / 2) * 3 * 0.125);
    }
    
    .main-navigation-toggle:checked ~ .main-navigation li:nth-child(4):after,
    .main-navigation-toggle:checked ~ .main-navigation li:nth-child(4) a {
      animation-delay: calc((var(--duration) / 2) * 4 * 0.125);
    }
    
    @keyframes nav-bg {
      from { transform: translateX(-100%) skewX(-15deg) }
      to { transform: translateX(0) }
    }
    
    @keyframes nav-line {
      0%   { transform: scaleX(0); transform-origin: 0 50%; }
      35%  { transform: scaleX(1.001); transform-origin: 0 50%; }
      65%  { transform: scaleX(1.001); transform-origin: 100% 50%; }
      100% { transform: scaleX(0); transform-origin: 100% 50%; }
    }
    
    @keyframes link-appear {
      0%, 25%   { transform: translateY(100%); }
      50%, 100% { transform: translateY(0); }
    }
    
    /* 新增：Leaflet 地图容器样式 */
    #leaflet-map {
      width: 100%;
      height: 600px;
      margin: 20px auto;
      border: 2px solid #ccc;
      border-radius: 12px;
    }

    /* New Button Styles Adapted for #animate-button */
    #animate-button {
      position: relative;
      display: block; /* Changed from inline-block to keep centered */
      margin: 20px auto; /* Keep centering margin */
      cursor: pointer;
      outline: none;
      border: 0;
      
      text-decoration: none;
      font-size: 1.5rem;
      color: var(--colorShadeA);
      font-weight: 700;
      text-transform: uppercase;
      font-family: "Open Sans", sans-serif; /* Apply Open Sans */
      padding: 1em 2em;
      border: 2px solid var(--colorShadeA);
      border-radius: 1em;
      background: var(--colorShadeE);
      transform-style: preserve-3d;
      transition: all 175ms cubic-bezier(0, 0, 1, 1);
    }

    #animate-button::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--colorShadeC);
      border-radius: inherit;
      box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.75em 0 0 var(--colorShadeA);
      transform: translate3d(0, 0.75em, -1em);
      transition: all 175ms cubic-bezier(0, 0, 1, 1);
      z-index: -1; /* Ensure pseudo-element is behind text */
    }

    #animate-button:hover:not(:disabled) {
      background: var(--colorShadeD);
      transform: translate(0, 0.375em);
    }

    #animate-button:hover:not(:disabled)::before {
      transform: translate3d(0, 0.75em, -1em); /* Keep original before transform on hover */
    }

    #animate-button:active:not(:disabled) {
      transform: translate(0em, 0.75em);
    }

    #animate-button:active:not(:disabled)::before {
      transform: translate3d(0, 0, -1em);
      box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.25em 0 0 var(--colorShadeB);
    }

    /* Style for Disabled Button */
    #animate-button:disabled {
      background-color: #cccccc; /* Standard disabled color */
      color: #666666;
      cursor: not-allowed;
      border-color: #aaaaaa;
      /* Remove hover/active effects for disabled state */
      transform: none;
    }
    #animate-button:disabled::before {
        /* Make pseudo element less prominent when disabled */
        background: #dddddd;
        box-shadow: 0 0 0 2px #cccccc, 0 0.75em 0 0 #aaaaaa;
        transform: translate3d(0, 0.75em, -1em); /* Keep original position */
    }

    /* Custom Popup Styles */
    .leaflet-popup-content {
        margin: 10px 15px; /* Adjust margins inside the popup */
        line-height: 1.4; /* Slightly tighter line spacing */
        font-size: 0.9rem; /* Base font size for popup text */
    }

    .leaflet-popup-content h3 {
        font-size: 1.1rem; /* Smaller heading */
        margin-bottom: 0.4em; /* Adjust space below heading */
    }

    .leaflet-popup-content p {
        font-size: 0.85rem; /* Smaller paragraph text */
        margin: 0.3em 0; /* Adjust space around paragraphs */
    }

    .leaflet-popup-content img {
        margin-top: 0.5em; /* Adjust space above image */
        /* Optional: set max-width for image if needed, though width:100% is already set inline */
        /* max-width: 250px; */ 
    }

    /* Reduce max-width of the inner div inside the popup */
    .leaflet-popup-content > div {
        max-width: 250px !important; /* Reduce max-width, use !important to override inline style if needed */
    }
  </style>
</head>
<body>
  <!-- 新导航菜单 -->
  <input id="page-nav-toggle" class="main-navigation-toggle" type="checkbox" />
  <label for="page-nav-toggle">
    <svg class="icon--menu-toggle" viewBox="0 0 60 30">
      <g class="icon-group">
        <g class="icon--menu">
          <path d="M 6 0 L 54 0" />
          <path d="M 6 15 L 54 15" />
          <path d="M 6 30 L 54 30" />
        </g>
        <g class="icon--close">
          <path d="M 15 0 L 45 30" />
          <path d="M 15 30 L 45 0" />
        </g>
      </g>
    </svg>
  </label>
  <nav class="main-navigation">
    <ul>
      <li><a href="index.html">中国外交历史</a></li>
      <li><a href="second.html">里程碑事件</a></li>
      <li><a href="third.html">文化传播图</a></li>
      <li><a href="fourth.html">一带一路</a></li>
    </ul>
  </nav>
  
  <div id="header-container">
      <header>
          <h1>里程碑事件</h1>
      </header>
  </div>
  <main class="main-content">
    
    <!-- 新增：地图容器 -->
    <div id="leaflet-map"></div>

    <!-- 新增：动画控制按钮 -->
    <button id="animate-button" class="big-button">播放动画</button>
  </main>
  
  <!-- 引入 Leaflet JS -->
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script>
    // 初始化 Leaflet 地图
    var map = L.map('leaflet-map').setView([30, 105], 3);
    
    // 加载高德地图切片（样式 7 为卫星或其他样式，可根据需要调整）
    L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}', {
      subdomains: ['1','2','3','4'],
      attribution: '© 高德地图'
    }).addTo(map);
    
    // Global variables for event data and animation
    let sortedEvents = [];
    let animationLine = null;
    let animationInterval = null;

    // Get button element
    const animateButton = document.getElementById('animate-button');
    animateButton.disabled = true; // Disable initially until data loads

    // Function to parse date strings (handles YYYY-MM-DD)
    function parseDate(dateString) {
        const parts = dateString.split('-');
        if (parts.length === 3) {
            // Year, Month (0-indexed), Day
            return new Date(parts[0], parts[1] - 1, parts[2]);
        }
        return null; // Invalid date format
    }

    // Fetch and process event data
    fetch('data/event.csv')
      .then(response => {
          if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
          }
          return response.text();
      })
      .then(csvText => {
        // Temporary array to hold parsed data before sorting
        let eventsData = []; 
        var lines = csvText.trim().split('\n');
        var header = lines[0].split(',');

        for (var i = 1; i < lines.length; i++) {
          var parts = lines[i].split(',');
          if (parts.length < 5) continue; // Skip incomplete lines

          var eventName = parts[0];
          var eventDateStr = parts[1];
          var lat = parseFloat(parts[2]);
          var lng = parseFloat(parts[3]);
          var mediaField = parts[4];
          
          if (isNaN(lat) || isNaN(lng)) continue;
          var eventDate = parseDate(eventDateStr);
          if (!eventDate) continue; 

          var mediaParts = mediaField.split('#');
          // Keep original description if needed, but primary image comes from sequence
          var description = mediaParts[1] || ''; 

          // Store event data for sorting and marker creation later
          eventsData.push({ 
              name: eventName, 
              date: eventDate, 
              dateStr: eventDateStr, // Keep original string for display
              lat: lat, 
              lng: lng, 
              description: description // Store description
          });
        }

        // Sort events by date
        sortedEvents = eventsData.sort((a, b) => a.date - b.date);
        
        // --- Create Markers and Popups AFTER Sorting ---
        const popupImageSequence = ['1.png', '3.png', '4.png', '2.png', '11.png'];
        const defaultImage = 'default.png'; // Fallback if sequence is shorter than events

        sortedEvents.forEach((event, index) => {
            const imageFilename = (index < popupImageSequence.length)
                                  ? popupImageSequence[index]
                                  : defaultImage;

            // Create custom icon (can be defined once outside loop if preferred)
            var customIcon = L.icon({
              iconUrl: 'img/map_标记地图点位_坐标点_nor.png',
              iconSize: [32, 32],
              iconAnchor: [16, 32],
              popupAnchor: [0, -32]
            });

            // Create marker
            var marker = L.marker([event.lat, event.lng], {icon: customIcon}).addTo(map);

            // Create popup content using the correct image from sequence
            var popupContent = `
              <div style="max-width:300px;">
                <h3>${event.name}</h3>
                <p><strong>日期：</strong>${event.dateStr}</p> 
                <img src="img/${imageFilename}" alt="${event.name}" style="width:100%;border-radius:8px; margin-top: 5px;">
                <p>${event.description}</p>
              </div>
            `;
            marker.bindPopup(popupContent);
        });
        // --- End Marker/Popup Creation ---

        // Enable the button if there are enough points to animate
        if (sortedEvents.length >= 2) {
            animateButton.disabled = false;
        }

      })
      .catch(err => {
        console.error('加载或处理 CSV 数据失败:', err);
        alert('无法加载事件数据，请检查文件或网络连接。');
      });

    // Animation logic
    animateButton.addEventListener('click', () => {
        if (sortedEvents.length < 2) {
            alert("数据点不足，无法播放动画。");
            return;
        }

        animateButton.disabled = true; // Disable button during animation

        // Clear previous animation if any
        if (animationInterval) {
            clearInterval(animationInterval);
            animationInterval = null;
        }
        if (animationLine) {
            map.removeLayer(animationLine);
            animationLine = null;
        }

        let currentSegmentIndex = 0;
        let currentPointOnSegment = 0;
        const stepsPerSegment = 30; // More steps = smoother, slower animation
        const intervalDelay = 50;   // Milliseconds between steps

        // Start with the first point
        let currentPolylinePoints = [ [sortedEvents[0].lat, sortedEvents[0].lng] ];
        animationLine = L.polyline(currentPolylinePoints, { 
            color: '#00BFFF', 
            weight: 5, 
            opacity: 0.9, 
            lineCap: 'round',   
            lineJoin: 'round'   
        }).addTo(map);

        animationInterval = setInterval(() => {
            const startPt = sortedEvents[currentSegmentIndex];
            const endPt = sortedEvents[currentSegmentIndex + 1];

            // Calculate intermediate point using linear interpolation for longitude
            // and adding an arc offset for latitude
            const progress = currentPointOnSegment / stepsPerSegment;
            const linearLat = startPt.lat + (endPt.lat - startPt.lat) * progress;
            const lng = startPt.lng + (endPt.lng - startPt.lng) * progress;

            // Calculate arc height - Increased multiplier and range for more curve
            const segmentDistance = map.distance([startPt.lat, startPt.lng], [endPt.lat, endPt.lng]);
            // Increased divisor influence slightly, widened clamp range
            const maxArcHeightDegrees = Math.min(Math.max(segmentDistance / 150000, 1.0), 10); // Adjusted for more arc

            const arcOffset = maxArcHeightDegrees * Math.sin(progress * Math.PI);
            const adjustedLat = linearLat + arcOffset;
            
            // Add the calculated point to the line
            animationLine.addLatLng([adjustedLat, lng]);

            currentPointOnSegment++;

            // Check if the current segment is finished
            if (currentPointOnSegment > stepsPerSegment) {
                // Ensure the final point of the segment is precisely added
                animationLine.addLatLng([endPt.lat, endPt.lng]); 
                
                currentSegmentIndex++; // Move to the next segment
                currentPointOnSegment = 0; // Reset progress for the new segment

                // Check if the entire animation is complete
                if (currentSegmentIndex >= sortedEvents.length - 1) {
                    clearInterval(animationInterval);
                    animationInterval = null;
                    animateButton.disabled = false; // Re-enable the button
                    console.log("动画完成!");
                }
            }
        }, intervalDelay);
    });
  </script>
</body>
</html>
